<template>
	<view class="tab-bar">
		<view class="tab-bar-warp flex flex-center">
			<view class="tab-bar-item" 
				v-for="(item, index) in props.navList" 
				:key="item.pageIndex"
				:class="props.currPageName == item.name ? 'tab-bar-item__active' : ''"
			>
				<view class="icon-outer">
				</view>	
				<icon class="iconfont tab-bar-item--icon"
					:class="[item.iconPath]"
					@click="change(item)"
				></icon>
			</view>
		</view>
	</view>
</template>

<script setup>

const props = defineProps({
	currPageName: {
		type: String,
		required: true
	},
	navList: {
		type: Array,
		required: true
	}
})

function change(item) {
	emit('change', item)
}

const emit = defineEmits(['change'])

</script>

<style lang="less">
@import './style/index.less';
</style>